<template>
	<div class="canvasEditor" :class="isHiden ? 'hide' : ''">
		<!-- 编辑器 -->
		<div class="canvasEditor-content">
			<div class="canvasEditor-content__top">
				<div class="title-wrapper" @click="openTitle('top')">
					<div class="title" @click.stop="active = true" :class="active ? 'active' : ''">
						<span>环境</span>
					</div>
					<div class="title" @click.stop="active = false" :class="active ? '' : 'active'">
						<span>属性</span>
					</div>
					<i class="el-icon-arrow-up" :class="openTop ? '' : 'rotate'"></i>
				</div>
				<!-- 环境 -->
				<div class="environment-content" v-show="active" :style="{ height: topHeight }">
					<Environment />
				</div>
				<!-- 属性 -->
				<div class="attribute-content" v-show="!active" :style="{ height: topHeight }">
					<div>
						<Attribute />
					</div>
				</div>
			</div>
			<div class="canvasEditor-content__bottom">
				<div class="title-wrapper" @click="openTitle('bottom')">
					<div class="title active">
						<span>场景大纲</span>
					</div>
					<i class="el-icon-arrow-up" :class="openBottom ? '' : 'rotate'"></i>
				</div>
				<!-- 场景大纲 -->
				<div class="scene-content" :style="{ height: bottomHeight }">
					<Scene :openBottom="openBottom" />
				</div>
			</div>
		</div>
		<!-- 展示隐藏 -->
		<div class="canvasEditor-hide" @click="toggleHidden">
			<i class="el-icon-d-arrow-right" :class="isHiden ? 'rotate' : ''"></i>
		</div>
	</div>
</template>
 
<script>
import Environment from './environment/index.vue';
import Attribute from './attribute/index.vue';
import Scene from './scene/index.vue';

export default {
	name: 'CanvasEditor',
	components: {
		Environment /* 环境 */,
		Attribute /* 属性 */,
		Scene /* 场景大纲 */
	},
	data() {
		return {
			isHiden: false /* 是否隐藏编辑器 */,
			active: false /* 切换卡片 */,
			openTop: true /* 是否打开上方卡片 */,
			openBottom: true /* 是否打开下方卡片 */,
			topHeight: 'calc(50vh - 73px)' /* 顶部卡片高度 */,
			bottomHeight: 'calc(50vh - 72px)' /* 底部卡片高度 */
		};
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},

		// 显示隐藏切换
		toggleHidden() {
			this.isHiden = !this.isHiden;
		},

		// 点击标题打卡卡片
		openTitle(type) {
			if (type === 'top') {
				this.openTop = !this.openTop;
			} else {
				this.openBottom = !this.openBottom;
			}

			// 卡片所占高度
			if (this.openTop && this.openBottom) {
				this.topHeight = 'calc(50vh - 73px)';
				this.bottomHeight = 'calc(50vh - 72px)';
			} else if (this.openTop && !this.openBottom) {
				this.topHeight = 'calc(100vh - 145px)';
				this.bottomHeight = '0';
			} else if (!this.openTop && this.openBottom) {
				this.topHeight = '0';
				this.bottomHeight = 'calc(100vh - 145px)';
			} else {
				this.topHeight = '0';
				this.bottomHeight = '0';
			}
		}
	}
};
</script>
 
<style lang="scss">
.canvasEditor {
	font-size: 14px;
	position: absolute;
	right: 0;
	top: 0;
	width: 275px;
	height: 100%;
	z-index: 98;
	background-color: $--xy-color-deeper;
	border-left: $--xy-border-deep;
	transition: transform 0.3s;

	.canvasEditor-content {
		height: 100%;
		overflow: hidden;

		&__top,
		&__bottom {
			background: #1b1b1b;

			.rotate {
				transform: rotate(180deg);
			}
		}

		.title-wrapper {
			position: relative;
			display: flex;
			@include xy-stopselect;
			cursor: pointer;

			i {
				color: #ccc;
				position: absolute;
				right: 10px;
				top: 8px;
				transition: all 0.3s;
			}
		}

		.environment-content,
		.attribute-content,
		.scene-content {
			background-color: #25262a;
			@include xy-scroll;
			overflow: hidden;
			transition: height 0.3s;
		}

		.attribute-content {
			& > div {
				height: 100%;
				padding: 12px 0;
			}
		}

		.title {
			height: 30px;
			display: flex;
			align-items: center;
			color: #ccc;
			font-size: 12px;
			padding: 0 12px;
			cursor: pointer;

			&:hover {
				color: #fff;
			}
		}

		.title.active {
			background-color: #25262a;
			position: relative;
			color: #fff;

			&::before {
				position: absolute;
				display: block;
				content: '';
				width: 100%;
				height: 2px;
				top: 0;
				left: 0;
				background: #2c68f6;
			}
		}
	}

	&.hide {
		transform: translateX(275px);
	}

	.canvasEditor-hide {
		position: absolute;
		z-index: 98;
		top: 0;
		left: -33px;
		cursor: pointer;
		border-radius: 4px 0 0 4px;
		overflow: hidden;
		background-color: #262629;
		height: 28px;
		width: 32px;
		@include xy-dfc;

		i {
			font-size: 20px;
			color: $--xy-color-light;
			transition: transform 0.3s;

			&.rotate {
				transform: rotate(180deg);
			}
		}
	}
}
</style>